<html xmlns:th="http://www.thymeleaf.org">
<head th:include="layout :: htmlhead" th:with="title='Hello'"></head>
<body>
<div class="container">
    <h4 class="float-left mt-2">股票详情</h4>
    <form id="messageForm" th:action="@{/share/editShare}" th:object="${share}" method="post">
        <div class="form-group">
            <label>股票代码:</label>
            <input type="text" name="shareCode" th:value="${share.shareCode}" disabled/>
        </div>
        <div class="form-group">
            <label>股票名称:</label>
            <input type="text" name="shareName" th:value="${share.shareName}" disabled/>
        </div>

        <input type="hidden" th:if="${gross != null}" th:value="${gross.dateList}" id="dateList"/>
        <input type="hidden" th:if="${gross != null}" th:value="${gross.doubleList}" id="doubleList"/>
    </form>

    <a class="btn btn-primary" th:href="'/share/revenueReport/save?id=' + ${share.id}">按报告期</a>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 100%;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var doubleList = document.getElementById('doubleList').value;
        var dateList = document.getElementById('dateList').value;
        var doubles = converToArray(doubleList);
        var dates = converToArray(dateList);

        function converToArray(source) {
            var sourceArr = source.replace("[", "").replace("]", "").split(",");
            var arr = [];
            for (var i in sourceArr) {
                arr.push(sourceArr[i]);
            }
            return arr;
        }

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '营业总收入(亿元)'
            },
            tooltip: {},
//            legend: {
//                data: ['营业总收入']
//            },
            xAxis: {
//                data: ["17-03-31", "17-06-30", "17-09-30","17-12-31", "18-03-31", "18-06-30", "18-09-30", "18-12-31", "19-03-31"]
                data: dates
            },
            yAxis: {},
            series: [{
                name: '营业总收入',
                type: 'bar',
//                data: [9.47, 20.4, 31.9, 47.8, 10.1, 24.1, 38.4, 54.7, 13.4]
                data: doubles,
                label:{
                    normal:{
                        show:true,
                        position:'top'
                    }
                }
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</div>

</body>